<template>
    <div id="single-choice"
        class="task-single-choice">
        <!-- 每个单选 -->
        <div class="task-single-main"
          :id="'multiple'+opIndex"
          v-for="(option,opIndex) in FormData.multipleData"
          :key="opIndex">
      <div class="back">
        <!-- 本题预览 -->
        <div class="task-single-body">
          <!-- 题干 -->
          <!-- {{opIndex+1}}.{{option.subject}} {{'('+option.score+'分)'}} -->
          <p class="task-single-p p" v-if="option.subject">
            {{opIndex+1}}.{{option.subject}}({{option.score}}
            <!-- <el-input 
              style="width:80px;"
              v-model="option.score" 
              placeholder="请输入内容" 
              @change="scoreInputChange()"/> -->
            分)
            <el-button v-if="!option.isEdit" @click="isEditStatus(option)" type="primary" icon="el-icon-edit" plain>编辑</el-button>
            <el-button v-if="option.isEdit"  @click="isEditStatus(option)" type="success" icon="el-icon-edit" plain>完成</el-button>
          </p>
          <!-- 选项 -->
          <div class="task-single-option option"
            v-for="(choice,chIndex) in option.options"
            :key="chIndex">
            <!-- v-model="FormDataAnswer.multipleData[opIndex]"  -->
            <!-- <el-radio
                class="task-el-radio task-el-single-option"
                v-model="FormData.multipleData[opIndex].answer" 
                :label="choiceList[chIndex]">
                {{ choiceList[chIndex] + ". "
                +choice[choiceList[chIndex]]}}
            </el-radio> -->
              <el-checkbox-group
                @change="lo"
                class="task-el-radio task-el-single-option"
                v-model="FormData.multipleData[opIndex].answer"
                :label="choiceList[chIndex]!==undefined?choiceList[chIndex]:''">
                <el-checkbox :label="choiceList[chIndex]">
                  {{choiceList[chIndex] +". "+option.options[chIndex]}}
                  <!-- {{ choiceList[chIndex] + ". " +choice[choiceList[chIndex]]!==undefined?choice[choiceList[chIndex]]:''}} -->
                </el-checkbox>
              </el-checkbox-group>
            <br>
          </div>
        </div>
        <!-- 设计栏 -->
      <el-collapse-transition>
        <div class="task-single-design design" v-show="option.isEdit">
            <!-- 题干设计 -->
          <div class="task-design-title">
            <div class="task-title-edit">题目编辑</div>
            <div class="task-single-design-title">
            <el-input
                type="textarea"
                :autosize="{minRows:4}"
                class="task-el-input "
                style="width:100%;"
                v-model="option.subject"
                :placeholder="'请填写题目'">
            </el-input>
            </div>
          </div>
            <div class="task-single-design-options-div">
            <!-- 选项设计 -->
            <div class="task-single-design-options-box">
                <div class="task-single-control-message single" style="margin:5px 0 0 0;">选择多选题答案</div>
                <div class="task-single-design-options"
                v-for="(choice,chIndex) in option.options"
                :key="chIndex">
                  <el-checkbox-group
                    :min="2" 
                    @change="lo"
                    class="task-el-radio task-el-single-option"
                    v-model="FormData.multipleData[opIndex].answer">
                    <el-checkbox :label="choiceList[chIndex]">
                      {{choiceList[chIndex]}}
                      <!-- {{ choiceList[chIndex] + ". " +choice[choiceList[chIndex]]!==undefined?choice[choiceList[chIndex]]:''}} -->
                    </el-checkbox>
                  </el-checkbox-group>
                  <div style="min-width:22px;">
                      {{choiceList[chIndex]}}：
                  </div>
                  <el-input
                      type="textarea"
                      :autosize="{minRows:2}"
                      class="task-el-input
                        task-single-design-options-input"
                      v-model="option.options[chIndex]" 
                      :placeholder="'请输入选项 '+choiceList[chIndex]+' 的内容'">
                  </el-input>
                  <!-- <el-popconfirm
                    title="这是一段内容确定删除吗？">
                    <el-button circle 
                      type="danger" 
                      style="border:0;margin-left:20px;"
                      icon="el-icon-delete" 
                      title="删除此选项" 
                      @click="deleteOption(option.options,chIndex,'option')" />
                  </el-popconfirm> -->
                <div>
                  <i class="el-icon-caret-top" @click="moveOption(FormData.multipleData[opIndex].options, chIndex, 'up')" title="上移" style="color:#409eff;cursor: pointer;"/>
                  <i class="el-icon-caret-bottom" @click="moveOption(FormData.multipleData[opIndex].options,chIndex,'down')" title="下移" style="color:#409eff;cursor: pointer;"/>
                </div>
                <el-button  
                  @click="addOption(option,opIndex,chIndex)"
                  circle 
                  slot="reference"
                  type="primary" 
                  style="border:0;margin-left:20px;"
                  icon="el-icon-plus" 
                  title="添加选项" />
                  <el-button 
                    @click="deleteOption(option.options,chIndex,'option')" 
                    circle 
                    slot="reference"
                    type="danger" 
                    style="border:0;margin-left:20px;"
                    icon="el-icon-delete" 
                    title="删除此选项" />
                </div>
            </div>
            <!-- 控制栏 -->
            <div class="task-single-control">
              <div class="task-single-control-message ">控制栏</div>
                <div class="control">
                    <div class="control-updown control-box">
                    <el-button type="primary" title="上移" @click="moveQuestion(FormData,opIndex, 'up')">上移</el-button>
                    <el-button type="primary" title="下移" @click="moveQuestion(FormData,opIndex, 'down')">下移</el-button>
                  </div>
                  <div class="control-savedelete control-box">
                    <el-button 
                      type="warning" 
                      title="从试卷中删除此题" 
                      @click="deleteQuestion(FormData.judgeData,option,opIndex)">
                      删除
                    </el-button>
                    <el-button 
                      type="info" 
                      title="添加到单选题库" 
                      >收藏
                    </el-button>
                  </div>
                  <div class="control-updown control-box">
                    <el-button 
                      type="primary" 
                        title="添加选项" 
                        @click="importQuestionBank(option,opIndex)">
                        导入
                    </el-button>
                    <el-button 
                      type="primary" 
                      title="在此处添加一个判断题" 
                      @click="addMultiple(opIndex)">加题</el-button>
                  </div>
                  <div class="control-updown control-box score">
                    <span>
                      分值：
                    </span>
                    <el-input 
                      type="number" 
                      title="分值" 
                      icon="el-icon-plus" 
                      v-model="option.score">
                      <span slot="suffix" style="color:#409eff;">分</span>
                    </el-input>
                  </div>
                    <!-- <div class="control-updown control-box">
                      <el-button type="primary" title="下移" icon="el-icon-sort-down" />
                      <el-button type="primary" title="上移" icon="el-icon-sort-up" />
                    </div> -->
                    <!-- <div class="control-savedelete control-box">
                      <el-button type="warning" title="删除" icon="el-icon-delete"/>
                      <el-button type="info" title="添加到单选题库" icon="el-icon-star-off"/>
                    </div> -->
                    <!-- <div class="control-updown control-box">
                      <el-button type="primary" title="下移" icon="el-icon-sort-down" />
                      <el-button type="primary" title="上移" icon="el-icon-sort-up" />
                    </div> -->
                    <!-- <div class="control-savedelete control-box">
                      <el-button type="warning" title="删除" icon="el-icon-delete"/>
                      <el-button type="info" title="添加到单选题库" icon="el-icon-star-off"/>
                    </div> -->
                </div>
            </div>
            </div>
        </div>  
      </el-collapse-transition>  
        </div>
        <!-- 题目分割线 -->
        <div class="hr" v-if="opIndex!=FormData.multipleData.length-1"/>

        </div>
        <div class="task-single-problom-editer">
        </div>
    </div>
</template>

<script>
import {multipleData} from '../../javascript/formatData'
export default {
  name: 'single-choice',
  props: ['FormData'],
  data () {
    return {
      visible: false,
      choiceList: ['A', 'B', 'C', 'D', 'E', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    //   singleData: []
    }
  },
  mounted () {
    this.$emit('singleAnswer', 1)
  },
  methods: {
    moveOption (ArrayData, index, type) {
      const options = {
        up: () => {
          if (index === 0) {
            this.$message.warning('已经是第一个了，没法再向上移动了！')
            return console.log('first')
          }
          this.swapArray(ArrayData, index, index - 1)
        },
        down: () => {
          if (index + 1 === ArrayData.length) {
            this.$message.warning('已经是最后一题个，没法再向下移动了')
            return console.log('last')
          }
          this.swapArray(ArrayData, index, index + 1)
        }
      }
      options[type]()
    },
    isEditStatus (option) {
      option.isEdit = !option.isEdit
    },
    // 导入题库
    importQuestionBank (option, opIndex) {
    },
    scoreInputChange (e) {
      console.log(e)
    },
    deleteQuestion (ArrayData, option, opIndex) {
      console.log(ArrayData, option, opIndex)
      ArrayData.splice(opIndex, 1)
    },
    addMultiple (opIndex) {
      this.FormData.multipleData.push(JSON.parse(JSON.stringify(multipleData)))
      // this.FormData.multipleData.push({
      //   id: 'M-202106060001',
      //   // 题目
      //   subject: 'v',
      //   // 单选选项
      //   options: [
      //     'multipleData', 'multipleData', 'multipleData', 'multipleData'
      //   ],
      //   // 正确答案 学生考试生成的试卷答案为选项
      //   answer: ['A'],
      //   // 考生填写的答案
      //   studentAnswer: '',
      //   // 解析
      //   analysis: '',
      //   // 分值
      //   score: ''
      // })
      setTimeout(() => {
        document.getElementById('multiple' + (opIndex + 1)).scrollIntoView({ block: 'start', behavior: 'smooth' })
      }, 200)
    },
    // 打开删除按钮， 删除选项
    deleteOption (option, optionIndex, type) {
      const options = {
        design: () => {
        },
        option: () => {
          console.log(option, optionIndex, type)
          if (option.length <= 3) {
            return this.$message({
              message: '多选题型最少三个选项',
              type: 'warning'
            })
          }
          option.splice(optionIndex, 1)
          console.log(option)
        }
      }
      options[type]()
    },
    // 添加选项按钮
    addOption (option, opIndex, chIndex) {
      // this.FormData.multipleData[optionIndex].options.push('')
      this.FormData.multipleData[opIndex].options.splice(chIndex, 0, '')
    },
    ad (option, optionIndex) {
      console.log(this.FormData.multipleData[optionIndex].options)
    },
    lo () {
      this.FormData.multipleData[0].answer = this.FormData.multipleData[0].answer.sort()
    },
    // 移动 点击的题 的位置
    // arr 点击的位置 移动的方式
    moveQuestion (ArrayData, singleIndex, type) {
      console.log(ArrayData, singleIndex, type)
      const options = {
        'down': () => {
        //   console.log(singleIndex, ArrayData.multipleData.length)
          if (singleIndex + 1 === ArrayData.multipleData.length) {
            this.$message.warning('已经是最后一题个，没法再向下移动了')
            return console.log('last')
          }
          this.swapArray(ArrayData.multipleData, singleIndex, singleIndex + 1)
          setTimeout(() => {
            document.getElementById('multiple' + (singleIndex + 1)).scrollIntoView({ block: 'start', behavior: 'smooth' })
          }, 200)
        },
        'up': () => {
          if (singleIndex === 0) {
            this.$message.warning('已经是第一个了，没法再向上移动了！')
            return console.log('first')
          }
          this.swapArray(ArrayData.multipleData, singleIndex, singleIndex - 1)
          setTimeout(() => {
            document.getElementById('multiple' + (singleIndex - 1)).scrollIntoView({ block: 'start', behavior: 'smooth' })
          }, 200)
        }
      }
      options[type]()
    },
    swapArray (arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
    }
  }
}
</script>

<style lang="less" scoped>

</style>